import React, { Component } from 'react';
import styles from './index.less';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { Avatar, Badge, Menu, Icon, Spin } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import txName from '@/assets/NewHome/txName.png';
import iconSetting from '@/assets/NewHome/icon.png';
import triangle from '@/assets/NewHome/triangle.png';
import { notification } from 'antd';
// import jqr2 from '../../assets/NewHome/jqr1.png';

class NewHome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false,
      login:true,

    };
  }

  componentDidMount() {
    const data = JSON.parse(localStorage.getItem('currentUser')) ;
    if(!data){
      notification.error({
        message: '请求失败',
        description: '您尚未登录，稍后我们为你跳转到登录页面'
      });
      setTimeout(()=>{
        localStorage.clear();
        window.g_app._store.dispatch({
          type: 'login/logout',
        });
        return;
      },500)
    }
    setTimeout(()=>{
      this.setState({login:false})
    },1000)
  }

  newjqr = () => {
    // 相似问少跳转
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: '/overviewRobots/NewRobot',
      })
    );
  };

  editjqr = () => {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: '/overviewRobots',
      })
    );
  };
  systemManagement = () => {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: 'sys/userManagement',
      })
    );
  };


  onMenuClick = a => {
    const { dispatch } = this.props;
    if (a.key === 'userinfo') {
      dispatch(
        routerRedux.push({
          pathname: '/account/settings',
        })
      );
    }
    if (a.key === 'logout') {
      const { dispatch } = this.props;
      dispatch({
        type: 'login/logout',
      });
    }
  };

  handleMouseOver = () => {
    this.setState({
      modalIsOpen: true,
    });
  };

  handleMouseOut = () => {
    this.setState({
      modalIsOpen: false,
    });
  };

  render() {
    const { modalIsOpen } = this.state;
    const { currentUser } = this.props;
    const nick =  window.localStorage.getItem('nick') == undefined?'': window.localStorage.getItem('nick');
    return (
      <div className={styles.home}>
        <Spin spinning={this.state.login}>
        <div onMouseLeave={this.handleMouseOut} className={styles.homeBigTop}>
          <div className={styles.homeTop} />
          <div className={styles.homeToptwo}>
            <div style={{ float: 'right' }}>
              <a href="/notice" rel="noopener noreferrer">
                <Badge style={{ cursor: 'pointer' }} count={currentUser.unReadNoticeCount}>
                  <img style={{ cursor: 'pointer' }} src={iconSetting} alt="" />
                </Badge>
              </a>
              <span style={{ marginRight: 28, marginLeft: 38 }}>
                <Avatar size={64} icon="user" src={txName} style={{ background: '#fff' }} />
              </span>
              <div
                style={{
                  color: '#c9d0d9',
                  minWidth: 95,
                  display: 'inline-block',
                  margin: '0px 10px',
                }}
              >
                {/* {currentUser.nick} */}
                {nick}
              </div>
              <img
                onMouseOver={this.handleMouseOver}
                style={{ cursor: 'pointer' }}
                src={triangle}
                alt=""
              />
            </div>
            {modalIsOpen ? (
              <Menu
                style={{ width: 130 }}
                className={styles.menu}
                selectedKeys={[]}
                onClick={this.onMenuClick}
              >
                <Menu.Item key="userinfo">
                  <Icon type="setting" />
                  <FormattedMessage
                    id="menu.account.accountSettings"
                    defaultMessage="account settings"
                  />
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key="logout">
                  <Icon type="logout" />
                  <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
                </Menu.Item>
              </Menu>
            ) : null}
          </div>
        </div>
        <div className={styles.hometwo}>
          {/* <div className={styles.leftA}> */}
          {/* 二期 style={{ paddingLeft: '5%' }} */}
          <div className={styles.tos}>
            <div style={{ paddingLeft: '5%' }} className={styles.flexA}>
              <div onClick={this.newjqr} className={styles.flexAimg} />
              <div onClick={this.editjqr} className={styles.flexAimgb} />
            </div>
            <div onClick={this.systemManagement} className={styles.flexAimgcpig} />
          </div>
          {/* <div style={{ paddingLeft: '5%' }} className={styles.flexA}>
              <div className={styles.flexAimgc} style={{ width: 431, height: 340 }} />
              <div className={styles.flexAimgd} style={{ width: 431, height: 340 }} />
            </div> */}
          {/* </div> */}
        </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(NewHome);
